<script>
    var data =
    {   
      "grid": [
    {
      "class": "show1-box2",
      "title": "#头像",
      "imageSrc": "./奇奇怪怪、可可爱爱、很特别的头像分享_2_畅畅的美图文案馆_来自小红书网页版.jpg"
    },
    {
      "class": "show2-box2",
      "title": "#恋爱两百天日记",
      "imageSrc": "./微信图片_20241215135353.jpg"
    },
    {
      "class": "show3-box2",
      "title": "#海底捞",
      "imageSrc": "./微信图片_20241215135400.jpg"
    },
    {
      "class": "show4-box2",
      "title": "#大连#莲花山观景台",
      "imageSrc": "./微信图片_20241215135345.jpg"
    },
    {
      "class": "show5-box2",
      "title": "#日落",
      "imageSrc": "./微信图片_20241215135349.jpg"
    },
    {
      "class": "show6-box2",
      "title": "#钟楼",
      "imageSrc": "./微信图片_20241215135342.jpg"
    },
    {
      "class": "show7-box2",
      "title": "#夏天#水果",
      "imageSrc": "./微信图片_20241215135338.jpg"
    },
    {
      "class": "show8-box2",
      "title": "#长安",
      "imageSrc": "./微信图片_20241215135335.jpg"
    },
    {
      "class": "show9-box2",
      "title": "#头像",
      "imageSrc": "./IMG_9656.jpg"
    },
    {
      "class": "show10-box2",
      "title": "#羊肉泡馍",
      "imageSrc": "./微信图片_20241215135332.jpg"
    },
    {
      "class": "show11-box2",
      "title": "#大唐芙蓉园",
      "imageSrc": "./微信图片_20241215135329.jpg"
    },
    {
      "class": "show12-box2",
      "title": "#星海广场",
      "imageSrc": "./微信图片_20241215135322.jpg"
    },
    {
      "class": "show13-box2",
      "title": "#头像",
      "imageSrc": "./奇奇怪怪、可可爱爱、很特别的头像分享_1_畅畅的美图文案馆_来自小红书网页版.jpg"
    },
    {
      "class": "show14-box2",
      "title": "#花海",
      "imageSrc": "./微信图片_20241215135318.jpg"
    },
    {
      "class": "show15-box2",
      "title": "#现代都市",
      "imageSrc": "./微信图片_20241215135228.jpg"
    }
  ]
}
    var ljygridbox = document.querySelector('.ljygridbox');
    var gridItems = data.grid;
    // 动态创建图片框
    gridItems.forEach(function(item) {
      var box = document.createElement('div');
      box.className = item.class;

      var dropDownBar = document.createElement('div');
      dropDownBar.className = 'drop-down-bar';
      dropDownBar.innerHTML = '<p>' + item.title + '</p>';

      var img = document.createElement('img');
      img.src = item.imageSrc;
      img.alt = '';

      box.appendChild(dropDownBar);
      box.appendChild(img);

      document.querySelector('.ljygridbox').appendChild(box);
    });
  </script>

<script>
    // 假设有一些卡片数据
    var cards = 
    [
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160056.png",
      "alt": ""
    },
    "textbox": {
      "title": "2024理财趋势",
      "description": "晒晒你的年终理财成绩单",
      "dateRange": "12-15 至 01-30"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160233.png",
      "alt": ""
    },
    "textbox": {
      "title": "2024旅行结算",
      "description": "瓜分1亿流量赢旅行基金",
      "dateRange": "12-13 至 01-15"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160236.png",
      "alt": ""
    },
    "textbox": {
      "title": "冬日好好宅",
      "description": "分享冬日的家享专属流量扶持",
      "dateRange": "12-11 至 01-21"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160240.png",
      "alt": ""
    },
    "textbox": {
      "title": "周末玩车俱乐部",
      "description": "在下个弯道加速解锁飞驰人生",
      "dateRange": "12-07 至 01-07"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160243.png",
      "alt": ""
    },
    "textbox": {
      "title": "梦中情棍大赛",
      "description": "用一根棍子横扫百万流量",
      "dateRange": "12-02 至 12-20"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160246.png",
      "alt": ""
    },
    "textbox": {
      "title": "小进步学年",
      "description": "参与赢知识月历和千万曝光",
      "dateRange": "12-15 至 01-19"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160249.png",
      "alt": ""
    },
    "textbox": {
      "title": "玩车人年终述职",
      "description": "玩车这一年展开说说吧",
      "dateRange": "12-13 至 01-30"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160252.png",
      "alt": ""
    },
    "textbox": {
      "title": "看一场海边的冰河世纪",
      "description": "发笔记赢流量奖励和旅行基金",
      "dateRange": "12-11 至 02-06"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
    "class": "card-box",
    "image": {
      "src": "微信图片_20241216160255.png",
      "alt": ""
    },
    "textbox": {
      "title": "大声安利地道美食",
      "description": "赢20万流量和薯队长玩偶",
      "dateRange": "12-04 至 12-30"
    },
    "button": {
      "class": "details-button",
      "text": "查看详情"
    }
  },
  {
  "class": "card-box",
  "image": {
    "src": "微信图片_20241216160258.png",
    "alt": ""
  },
  "textbox": {
    "title": "冬日用车计划",
    "description": "让爱车永远保持最佳状态",
    "dateRange": "12-01 至 02-15"
  },
  "button": {
    "class": "details-button",
    "text": "查看详情"
  }
}
]
    // 遍历卡片数据并生成卡片
    cards.forEach(function(card) {
        var cardElement = document.createElement('div');
        cardElement.className = card.class;
        cardElement.innerHTML = `
            <div class="picture">
                <img src="${card.image.src}" alt="${card.image.alt}">
            </div>
            <div class="textbox">
                <h4>${card.textbox.title}</h4>
                <p>${card.textbox.description}</p>
                <p>${card.textbox.dateRange}</p>
            </div>
            <button class="details-button">${card.button.text}</button>
        `;
        document.querySelector('.allcard').appendChild(cardElement);
    });
    // 动态生成卡片的函数
function generateCards(cards) {
  var container = document.querySelector('.allcard'); // 获取卡片容器
  container.innerHTML = ''; // 清空现有内容

  cards.forEach(function(card) {
    var cardElement = document.createElement('div');
    cardElement.className = card.class;
    cardElement.innerHTML = `
      <div class="picture">
        <img src="${card.image.src}" alt="${card.image.alt}">
      </div>
      <div class="textbox">
        <h4>${card.textbox.title}</h4>
        <p>${card.textbox.description}</p>
        <p>${card.textbox.dateRange}</p>
      </div>
      <button class="details-button">${card.button.text}</button>
    `;
    container.appendChild(cardElement);
  });
}
</script>

<script>
    const data =
    [
    {
        "profilePicture": ".\\奇奇怪怪、可可爱爱、很特别的头像分享_1_畅畅的美图文案馆_来自小红书网页版.jpg",
        "username": "阿尼亚",
        "followDate": "08-15",
        "buttonType": "mutual-follow",
        "buttonText": "互相关注"
    },
    {
        "profilePicture": ".\\奇奇怪怪、可可爱爱、很特别的头像分享_2_畅畅的美图文案馆_来自小红书网页版.jpg",
        "username": "洛",
        "followDate": "06-20",
        "buttonType": "mutual-follow",
        "buttonText": "互相关注"
    },
    {
        "profilePicture": ".\\微信图片_20241217200419.png",
        "username": "大头儿子",
        "followDate": "03-30",
        "buttonType": "mutual-follow",
        "buttonText": "互相关注"
    },
    {
        "profilePicture": ".\\微信图片_20241217200423.jpg",
        "username": "星遇",
        "followDate": "07-14",
        "buttonType": "mutual-follow",
        "buttonText": "互相关注"
    },
    {
        "profilePicture": ".\\微信图片_20241217200426.jpg",
        "username": "中秋",
        "followDate": "03-24",
        "buttonType": "follow-back",
        "buttonText": "回关"
    },
    {
        "profilePicture": ".\\微信图片_20241217200430.jpg",
        "username": "强哥",
        "followDate": "08-23",
        "buttonType": "follow-back",
        "buttonText": "回关"
    },
    {
        "profilePicture": ".\\微信图片_20241217200433.jpg",
        "username": "没错是我",
        "followDate": "04-23",
        "buttonType": "follow-back",
        "buttonText": "回关"
    }
]

    const followerList = document.querySelector('.follower-list');
    // 遍历数据并生成HTML
    data.forEach(item => {
        const followerItem = document.createElement('div');
        followerItem.classList.add('follower-item');
        followerItem.innerHTML = `
            <img src="${item.profilePicture}" alt="Profile Picture">
            <div class="follower-info">
                <strong>${item.username}</strong><br>
                开始关注你了 ${item.followDate}
            </div>
            <a href="#" class="button ${item.buttonType}">${item.buttonText}</a>
        `;
        followerList.appendChild(followerItem);
    });
</script>